<script>
  export default { name: 'TaskExceptPage' }
</script>

<script setup>
  import { ref, computed } from 'vue'
  import { reportException } from '@/apis/task'
  import { onLoad } from '@dcloudio/uni-app'
  import { toast } from '../../utils/utils'

  const query = ref({})
  onLoad((_query) => {
    query.value = _query
  })

  // 组件 ref
  const popup = ref(null)
  // 文件提示
  const exceptTime = computed(() => {
    return timePicker.value || '请选择'
  })
  // 异常日期
  const timePicker = ref('')

  const exceptionPlace = ref('')
  // 打开地图
  async function onLocationChoose() {
    const { address } = await uni.chooseLocation()
    exceptionPlace.value = address
  }

  // 点击类型弹层确认按钮
  function onPopupConfirm() {
    exceptionType.value = checkedExceptionType.value.join(',')
    popup.value.close()
  }

  // 打开弹层
  function onPopupOpen() {
    popup.value.open()
  }

  const exceptionDescribe = ref('')

  const exceptionImagesList = ref([])

  const exceptionTypes = ref(['发动机启动困难', '不着车，漏油', '照明失灵', '排烟异常、温度异常', '其他问题'])
  // const exceptionTypes = ref([{ item: '发动机启动困难', checked: false }, '不着车，漏油', '照明失灵', '排烟异常、温度异常', '其他问题'])
  // 选中的异常类型（临时存储的地方）
  const checkedExceptionType = ref([])
  const exceptionType = ref('') // 用于页面显示和接口数据
  const onChange = (e) => {
    checkedExceptionType.value = e.detail.value
  }

  const disabledSubmitBtn = computed(() => {
    return timePicker.value === '' || exceptionPlace.value === '' || exceptionType.value === ''
  })

  const submit = async () => {
    await reportException({
      transportTaskId: query.value.transportTaskId,
      exceptionTime: timePicker.value,
      exceptionPlace: exceptionPlace.value,
      exceptionType: exceptionType.value,
      exceptionDescribe: exceptionDescribe.value,
      exceptionImagesList: exceptionImagesList.value.map(({ url }) => ({ url })),
    })

    toast('异常上报成功')

    setTimeout(uni.switchTab, 1500, {
      url: '/pages/task/index',
    })
  }

  const isChecked = (typeStr) => {
    return exceptionType.value.split(',').includes(typeStr)
  }
</script>

<template>
  <view class="page-container">
    <scroll-view class="scroll-view" scroll-y>
      <view style="margin: 30rpx" class="scroll-view-wrapper">
        <uni-list :border="false">
          <uni-list-item show-arrow title="异常时间">
            <template #footer>
              <uni-datetime-picker v-model="timePicker">
                <view class="picker-value">{{ exceptTime }}</view>
              </uni-datetime-picker>
            </template>
          </uni-list-item>

          <uni-list-item
            show-arrow
            clickable
            ellipsis="1"
            @click="onLocationChoose"
            title="上报位置"
            :rightText="exceptionPlace || '请选择'"
          />
          <uni-list-item
            show-arrow
            clickable
            @click="onPopupOpen"
            title="异常类型"
            :rightText="exceptionType || '请选择'"
          />
          <uni-list-item direction="column" title="异常描述">
            <template v-slot:footer>
              <view class="textarea-wrapper">
                <textarea v-model="exceptionDescribe" class="textarea" placeholder="请输入异常描述"></textarea>
                <view class="words-count">{{ exceptionDescribe.length }}/50</view>
              </view>
            </template>
          </uni-list-item>
          <uni-list-item :border="false" style="margin-top: -30rpx" direction="column" title="上传图片（最多6张）">
            <template v-slot:footer>
              <uni-file-picker v-model="exceptionImagesList" limit="6"></uni-file-picker>
            </template>
          </uni-list-item>
        </uni-list>
      </view>
    </scroll-view>
    <view class="fixbar">
      <button class="button" :disabled="disabledSubmitBtn" @click="submit">提交</button>
    </view>
    <!-- 异常类型弹层 -->
    <uni-popup ref="popup" :mask-click="true" type="bottom">
      <uni-list class="popup-action-sheet">
        <uni-list-item>
          <template #header>
            <view class="header">选择类型</view>
          </template>
        </uni-list-item>

        <uni-list-item>
          <template #body>
            <checkbox-group style="width: 100%" @change="onChange">
              <label v-for="(v, i) of exceptionTypes" :key="i" style="display: flex; padding: 20rpx 10rpx; width: 100%">
                <view>
                  <checkbox :value="v" :checked="isChecked(v)" color="#EF4F3F" />
                </view>
                <view>{{ v }}</view>
              </label>
              <!-- <label style="display: flex; padding: 20rpx 10rpx; width: 100%">
                <view>
                  <checkbox value="不着车，漏油" color="#EF4F3F" />
                </view>
                <view>不着车，漏油</view>
              </label>
              <label style="display: flex; padding: 20rpx 10rpx; width: 100%">
                <view>
                  <checkbox value="照明失灵" color="#EF4F3F" />
                </view>
                <view>照明失灵</view>
              </label>
              <label style="display: flex; padding: 20rpx 10rpx; width: 100%">
                <view>
                  <checkbox value="排烟异常、温度异常" color="#EF4F3F" />
                </view>
                <view>排烟异常、温度异常</view>
              </label>
              <label style="display: flex; padding: 20rpx 10rpx; width: 100%">
                <view>
                  <checkbox value="其他问题" color="#EF4F3F" />
                </view>
                <view>其他问题</view>
              </label> -->
            </checkbox-group>
          </template>
        </uni-list-item>

        <!-- <uni-list-item title="发动机启动困难">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item title="不着车，漏油">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item title="照明失灵">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item title="排烟异常、温度异常">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item title="其他问题">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item> -->
        <uni-list-item>
          <template v-slot:body>
            <button @click="onPopupConfirm" class="button">确定</button>
          </template>
        </uni-list-item>
      </uni-list>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
